these ids could be improved, what about something like 'dropdown-unit-label' ?... better to use something as specific as we can or we could end up having multiple similar ids

think it would be nice to somewhere something that gives you an idea of what these values (10, 21, 22) actually mean. What about using an object outside of this component, something like const weightUnits = {g:10, mg:21, kg:22} (please note that I don't really understand what those values refer to and where do they come from). It is better to have some auto documentation rather than having some unkown values

is this being used somewhere?

is this package used?

why is it useful to have this package? I see that it is kind of used in pages/nutrition/index.jsx but seems to be importing a non used flexbox (what would be the advantage of using that flexbox compared to css defined flexbox?)

is sx={{}} needed?

I removed checkbox and leaved delete icon. Still working on it

maybe set the index to 0, or keep the previous products with setPoducts(prevProducts => [...prevProducts, ...data.products])

You are trying to keep up to date 2 different arrays which is error pron. As soon as you forget an edge case, the two arrays will not be sync and it's hard to debug

I propose to keep the setNutriments that could be renamed addNutrimentToTheTable
Replace the setAdditionalNutriments by missingNutriments which would be computed as follow:

const missingNutriments = offNutriments.filter(nutrimentKey => 
	data.every(element) => element.off_nutriment_id !== nutrimentKey) 
)

with offNutriments the list of all the nutrients available on openfoodfact

This would replace options and setAdditionalNutriments

imported but not used. Normally when you do yarn start in the console, you should see some warnings about lines where you import or define variables you do not use. You should remove them to get a cleaner code.

Here is what I get when I run yarn start from your branch

duplicated

Maybe rename it defaultNutrimentTableData Because it's the default values that will be edited by the user

You need a way to say "there is no unit specified for this nutriment". It can be either null or an empty string, but not the string "null"

It works, but writing offService.getNutritionToFillUrl() as an advantage. When reading the line of code we know this data is fetched from openfoodfact server. Otherwise it could be fetched from robotoff, or an other file

I assume it's a mistake. The </Box> is planned to be before the coma But that's not important.

@Shmigolk I think you get confused by the MUI demo, because it's cells only contain strings/numbers, so they use

<TableCell>{row.thValueToDisplay}</TabCell>

In our case, we want to render inputs which is a bit more complex.

I propose you the following strategy:
create a component NutritionTableRow as follow:

const NutritionTableRow = ({ nutrimentData, updateValue, updateUnit, updateQuantificator }) => {
	const onNutrimentValueChange = (event) => {updateValue(event.target.value)}
	const onUnitChange = () => {...}
	const onQuantificatorChange = () => {...}
	
	const {label, value, quantification, unit} = nutrimentData
	
	return <TableRow>
		<TableCell>
			<TextField select value={quantification} onChange={onQuantificatorChange}>
				<MenuItem value="=">=</MenuItem>
				<MenuItem value=">">></MenuItem>
				<MenuItem value="<"><</MenuItem>
			</TextField>
		</TableCell>
		<TableCell>
			<TextField label={label} value={value} onChange={onNutrimentValueChange} />
		</TableCell>
		//  Same for the unit
	<TableRow>
}

Then you will be able to simplify your table content as follow:

	nutriments.map(nutriment => <NutritionTableRow nutrimentData={nutriment}  updateValue={updateUnit(nutriment.off_nutriment_id)}/>)

The trickiest part being updateValue which is a function returning a function.

const updateValue = (nutrimentId) => (newValue) => {
	// We get the index of the nutriment we want to update
	const indexToModify = nutriments.findIndex(nutriment => nutriment.off_nutriment_id === nutrimentId)
	
	// early return if not element correspond to this id
	if(indexToModify < 0){ return }
	
	// We update the value to the nutriment
	const newNutriment = {...nutriments[indexToModify], value: newValue }
	setNutriments([...nutriments.slice(0, indexToModify), newNutriment, ...nutriments.slice(indexToModify+1)])
}

There is a shortcut for that by using TextField. It's

<TextField select value={...} onChange={...} label="unit">
	<MenuItem value={null}></MenuItem>
	<MenuItem value="g">g</MenuItem>
	<MenuItem value="mg">mg</MenuItem>
	...
</TextField>

Normally with those props it should be enough. The page does not need to know what you're doing. it just care about having the correct data thanks to setNutriments

Here we discussed that you can use newValue to avoid some edge cases

Some points which will be useful for tech interview about React (JSX syntax to be precise):

• By default props are provided as follow propName={propValue}
• You do not need the {} for sting. FOr example propName={"some text"} is same as propName="some text"
• A prop alone is equivalent to true. For example <Component isOpen /> is the same as <Component isOpen={true} />.